// 发请求，由于参数比较多，每次ajax请求都要带上这些参数，很繁琐
// 处理
// 把参数放到一个对象，方便复用
let query = {
    pagenum: 1, // 是	int	页码值
    pagesize: 2, //	是	int	每页显示多少条数据
    cate_id: '', // 	否	string	文章分类的 Id
    state: '', // 否	string	文章的状态，可选值有：已发布、草稿
}

let form = layui.form
let layer = layui.layer

// ================= 获取文章列表数据 =================
getArtList()
function getArtList() {
    axios
        .get('/my/article/list', {
            // get方式，需要在配置对象中，通过 params 来传递数据
            params: query,
        })
        .then((res) => {
            console.log(res)

            let newArr = res.data.data.map((item) => {
                return `
        <tr>
          <td>${item.title}</td>
          <td>${item.cate_name}</td>
          <td>${item.pub_date}</td>
          <td>${item.state}</td>
          <td>
            <button type="button" class="layui-btn layui-btn-xs btn_edit" data-id="${item.Id}">编辑</button>
            <button type="button" class="layui-btn layui-btn-danger layui-btn-xs btn_delete" data-id="${item.Id}">删除</button>
          </td>
        </tr>
      `
            })

            $('#list').html(newArr.join(''))

            // 在来处理分页效果
            renderPage(res.data.total)
        })
}

// 第二页数据  query.pagenum = 2
// axios.get("xxxxx", query);

// 获取分类列表数据 ==> 填充到分类的下拉框中
axios.get('/my/article/cates').then((res) => {
    // console.log(res);

    let newArr = res.data.data.map((item) => {
        // 还需要把option的value设置好值  value设置成对应的Id的值
        return `<option value="${item.Id}">${item.name}</option>`
    })
    // console.log(newArr.join(""));

    // 把option内容放到下拉框中  html() 方法可以使用，但是在这使用的话，会把原本的内容给覆盖掉，可以使用append方法进行添加（不会有覆盖问题）
    $('#cateSelect').append(newArr.join(''))

    // 刷新select选择框渲染
    form.render('select')
})

// ================= 实现筛选功能 ================
$('#form').on('submit', function (e) {
    e.preventDefault()

    // console.log($("#cateSelect").val());
    // console.log($("#stateSelect").val());

    // 还需要修改query对象的数据
    query.cate_id = $('#cateSelect').val()
    query.state = $('#stateSelect').val()

    // 当筛选的时候，需要从第一个看起
    query.pagenum = 1

    // 发送ajax获取对应的数据
    getArtList()
})

// ============ 分页功能 ============
let laypage = layui.laypage
function renderPage(total) {
    // 执行一个laypage实例
    laypage.render({
        elem: 'page-box', // 注意，这里的 page-box 是 ID，不用加 # 号
        count: total, //数据总数，从服务端得到
        limit: query.pagesize, // 每页显示的条数
        limits: [1, 2, 3, 5, 8, 10], // 每页条数的选择项
        curr: query.pagenum, // 起始页
        layout: ['count', 'limit', 'prev', 'page', 'next', 'skip'],
        jump: function (obj, first) {
            // console.log(first);
            // jump回调函数触发的时机2种情况
            //  1. laypage.render调用的时候，jump就会触发，  形参first 是true
            //  2. 分页切换会触发该回调函数，  形参first 是undefined

            //obj包含了当前分页的所有参数，比如：
            // console.log(obj.curr); // 得到当前页，以便向服务端请求对应页的数据。
            // console.log(obj.limit); // 得到每页显示的条数
            // 点击分页按钮的时候，需要获取当前页码，发送ajax请求获取到当前页码对应的数据
            // 修改query对象的pagenum的值
            query.pagenum = obj.curr
            query.pagesize = obj.limit

            // 首次不执行
            if (!first) {
                // if成立，说明first的值是undefined，是分页切换触发的jump
                getArtList()
            }
        },
    })
}

// =============== 删除功能 ===============
//  删除功能，有细节bug：当删除最后一页的最后一条数据的时候，当删除成功之后，应该去加载上一页的数据
$('#list').on('click', '.btn_delete', function () {
    let id = $(this).attr('data-id')
    // console.log(id);

    layer.confirm(
        '确认删除此文章吗?',
        { icon: 3, title: '提示' },
        function (index) {
            // 该函数是在点击确认按钮的时候会执行

            // 点击确认，发送ajax请求
            axios.get('/my/article/delete/' + id).then((res) => {
                console.log(res)

                if (res.data.status !== 0) {
                    return layer.msg(res.data.message)
                }

                // 删除成功

                // 解决删除的bug ==> 去加载上一页的数据
                //  当这一页的删除按钮的个数为一个的时候，表示这一条数据删除之后，这一页将没有了数据，就需要展示上一页
                //  页码最小值1
                if ($('.btn_delete').length === 1) {
                    /* if (query.pagenum === 1) {
            query.pagenum = 1;
          } else {
            query.pagenum = query.pagenum - 1;
          } */

                    // if ... else 三元写法
                    query.pagenum = query.pagenum === 1 ? 1 : query.pagenum - 1
                }

                layer.msg(res.data.message)

                // 关闭该层
                layer.close(index)

                // 重新获取所有文章列表数据
                getArtList()
            })
        }
    )
})

// =============== 编辑功能 ===============
$('#list').on('click', '.btn_edit', function () {
    let id = $(this).attr('data-id')
    // console.log(id);

    // 点击编辑按钮 要跳转到编辑页面去
    //  在地址后面带上id的数据 ==> 目的：art_edit 页面就可以url地址上获取到文章的id
    location.href = '../article/art_edit.html?id=' + id
})
